<template>
  <div style="background:#f3f3f3">
    <header class="mint-header" style="font-size: 18px;">
      <div class="mint-header-button is-left">
        <button class="mint-button mint-button--default mint-button--normal" style="font-size: 15px;" @click="option">
          <span class="mint-button-icon">
            <i class="mintui mintui-back" />
          </span>
          <label class="mint-button-text">返回</label>
        </button>
      </div>
      <h1 class="mint-header-title">报销审批</h1>
      <div class="mint-header-button is-right" />
    </header>
    <!-- <div style="height:40px" /> -->
    <!-- <div>{{equilist.length}}</div> -->
    <div style="padding:10px 15px;background:#fff">
      <div class="qjtime">
        <div style="border-top:0 solid #ddd;padding:10px 10px;">
          <span style="color:#26a2ff">报销种类:</span>
          <mt-button type="default" size="small" class="qjcolor" @click="addqjtime2">+添加</mt-button>
        </div>
        <div>
          <div v-for="(item, index) in reimarr" :key="index" style="border:1px solid #c3c3c3;margin-top:2px;">
            <chousebaoxiao :picdata="firstarr" :getpicval.sync="item.getallval" />
            <mt-field v-model="item.amount" label="金额:" placeholder="请输入金额" />
            <chousebumen :getspl.sync="item.branchid" style="border-bottom:1px solid #ddd;margin-left:6px;" />
            <div style="color:#030303;text-align:right;margin:5px 5px 5px 0;font-size:15px" @click="deletime(index)">删除</div>
          </div>
        </div>
      </div>
      <mt-field v-model="reimData.content" :label="baoxiao" style="margin-left:3px;width:100%;" placeholder="输入报销内容" />
      <mt-field style="margin-left:3px;" label="*申请时间:">
        <span style="color:#000;display:inline-block;text-align:right" @click="addtime">{{ grantime }}</span>
      </mt-field>
      <picker :values="paytype" :picdata="reimtypearr" class="rd_picker" style="margin-left:3px;" pictitle="*支付方式:" @getpicval="getzhifu" />
      <!-- <mt-field v-model="summoney" label="总金额(元):" disabled /> -->
      <mt-field label="总金额(元):" style="margin-left:6px;">
        <span style="color:#888">{{ formatPrice(summoney) }}</span>
      </mt-field>
      <mt-field label="大写金额:" style="margin-left:6px;">
        <span style="color:#888">{{ convertCurrency(summoney) }}</span>
      </mt-field>
      <!-- <mt-field v-model="convertCurrency(summoney)" label="大写金额" disabled /> -->
      <mt-field v-model="reimData.filenumber" style="margin-left:6px;" label="附件数量:" placeholder="输入附件数量" />
      <mt-field v-model="reimData.beizhu" style="margin-left:6px;" label="备注:" placeholder="输入报销备注" />
      <div style="margin:0 13px;border-top:1px solid #ddd;padding-top:10px">
        <span style="display:block;height:30px">上传附件：</span>
        <div style="width:100%;display:flex;flex-wrap:wrap;">
          <div v-for="(item, index) in filearr1" :key="index" style="width:20%;padding:0 5px;">
            <uploadpic :imagefile.sync="filearr1[index]" />
          </div>
        </div>
      </div>
      <chouseperson :atypeid="'0101'" :num="summoney" @getspl="getspl" />
      <picker :values="reimData.capitalid" :picdata="moneydata" class="rd_picker" style="margin-left:7px;" pictitle="关联审批:" @getpicval="getqk" />
    </div>
    <div class="btn_f">
      <mt-button type="default" style="width:100px;margin-right:15px" @click="goback()">取消</mt-button>
      <mt-button type="primary" style="width:100px" @click="submitreim">确定</mt-button>
    </div>

    <mt-popup v-model="popupVisible22" position="bottom" class="mint-popup" style="width:100%">
      <mt-picker :slots="dataList" :visible-item-count="5" :show-toolbar="true" value-key="cName" @change="onDateChange">
        <mt-button class="sure" style="display:block;position: absolute;right: 0px;" @click="handleConfirm2">确认</mt-button>
      </mt-picker>
    </mt-popup>
    <div class="datePicker">
      <mt-datetime-picker ref="picker" :start-date="new Date()" :visible-item-count="5" type="date" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日" @confirm="handleConfirm" @visible-change="closepicker" />
    </div>
  </div>
</template>
<script>
import picker from '~/components/picker.vue'
import picker2 from '~/components/picker2.vue'
import chousebaoxiao from '~/components/chousebaoxiao.vue'
import uploadpic from '~/components/uploadpic.vue'
import chouseperson from '~/components/chouseperson.vue'
import chousebumen from '~/components/chousebumen.vue'
export default {
  components: {
    uploadpic,
    chouseperson,
    chousebumen,
    picker,
    picker2,
    chousebaoxiao
  },
  data () {
    return {
      ts: this.newStore(),
      chouseval: '',
      firstarr: [],
      bumen: '',
      baoxiao: '*报销内容:',
      fileList2: [],
      filearr1: [{}, {}, {}, {}, {}],
      reimData: {},
      reimarr: [
        {
          mounttype: '',
          childmounttype: '',
          branchid: '',
          amount: ''
        }
      ],
      popupVisible22: false,
      chousname: [],
      grantime: '',

      filename: {
        name: '点我上传'
      },
      usedetail: '',
      moneydata: [],
      reimtypearr: [],
      aid: '',
      moneys: '',
      carid: '',
      paytype: '',
      getpicval2: [],
      dataList: [
        {
          flex: 1,
          values: [],
          className: 'slot1',
          textAlign: 'right'
        }
      ],
      htitle: '报销审批',
      handler: function (e) {
        e.preventDefault()
      }
    }
  },
  computed: {
    summoney () {
      let a = 0
      console.log(this.reimarr, 'sum')
      for (let i = 0; i < this.reimarr.length; i++) {
        a += Number(this.reimarr[i].amount)
      }
      return a
    }
  },
  created () {
    this.getcodeData('0501', '05', 'reimtypearr')
    this.getmoney()
    console.log(this.reimarr, 'reimarr')
  },
  mounted () {
    this.getitem()
    this.reimarr = []
    this.grantime = this.formatDate(new Date())
  },
  methods: {

    goback () {
      this.$router.push({ name: 'approval2', query: { name: '申请' } })
    },
    getzilei (item) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: item.mounttype,
        codetype: '05'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []
        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.code_id
          b.showname = item.hash.code_name
          a.push(b)
        }
        this.firstarr2 = a
      })
    },
    getqk (val) {
      console.log(val, 'val')
      this.reimData.capitalid = val.showname
      this.summoney = val.showname.split('-')[1]
      console.log(this.summoney, 'this.summoney')
    },
    getzhifu (val) {
      this.paytype = val
    },
    option () {
      this.$router.push({
        name: 'approval2',
        query: {
          name: ''
        }
      })
    },
    getcodeData (supid, codetype, arrname) {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid,
        codetype
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        //this[arrname] = ts.d.data.operation1;
        let a = []
        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.code_id
          b.showname = item.hash.code_name
          a.push(b)
        }
        this[arrname] = a
        // console.log(ts.d.data.operation1,'支付方式')
      })
    },
    // 获取请款类型
    getmoney () {
      const req = {
        handle:
          '0398B14C0EC6F01867D31307B7D9BCF926057EC38BCF4C1D8624F1C86CD24E67'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        console.log(ts.d.data.operation1, 'ts.d.data.operation1')
        // this.moneydata = ts.d.data.operation1
        let a = [{ showid: '', showname: '无' }]
        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          b.showname =
            ts.d.data.operation1[index].hash.capitaltype +
            '-' +
            ts.d.data.operation1[index].hash.amount +
            '(' +
            ts.d.data.operation1[index].hash.intime.substr(0, 10) +
            ')'
          b.showid = ts.d.data.operation1[index].hash.deptname
          a.push(b)
        }

        this.moneydata = a
        this.moneys = ts.d.data.operation1[index].hash.amount
        console.log(this.moneydata, 'this.moneydata')
      })
    },
    //提交
    submitreim () {
      for (let i = 0; i < this.reimarr.length; i += 1) {
        if (
          this.reimarr[i].getallval == '' ||
          this.reimarr[i].getallval == undefined
        ) {
          this.$messagebox('提示', '请选择报销种类')
          return
        }
        if (
          this.reimarr[i].amount == '' ||
          this.reimarr[i].amount == undefined
        ) {
          this.$messagebox('提示', '请输入金额')
          return
        }
        if (
          this.reimarr[i].branchid == '' ||
          this.reimarr[i].branchid == undefined
        ) {
          this.$messagebox('提示', '请输入申请部门')
          return
        }
      }
      if (this.reimData.content == '' || this.reimData.content == undefined) {
        this.$messagebox('提示', '请输入报销内容')
        return
      }
      if (this.grantime == '请选择时间' || this.grantime == '') {
        this.$messagebox('提示', '请选择申请时间')
        return
      }
      if (this.paytype == '' || this.paytype == undefined) {
        this.$messagebox('提示', '请选择支付方式')
        return
      }
      // if (this.summoney == '' || this.summoney == undefined) {
      // this.$messagebox('提示', '请选择清款类型')
      //return
      // }
      if (this.aid == '' || this.aid == undefined) {
        this.$messagebox('提示', '请选择审批流')
        return
      }
      this.$messagebox
        .confirm('确认提交报销审批?')
        .then(() => {
          const req = {
            handle:
              '9000B8B8D347526960C5BAB1FB6894EF8B7B312373E9BEF47A8517CE4098C19A',
            atype: '0101',
            flowid: this.aid
          }
          this.spost(this.ts, '/mainservlet', req).then(ts => {
            console.log()
            console.log(this.reimarr, 'this.reimarr')

            const req2 = this.reimData
            this.reimData.mounttype = []
            this.reimData.childmounttype = []
            this.reimData.branchid = []
            this.reimData.amount = []

            for (let i = 0; i < this.reimarr.length; i++) {
              this.reimData.amount.push(this.reimarr[i].amount)
              this.reimData.mounttype.push(
                this.reimarr[i].getallval.split('-')[0]
              )
              this.reimData.childmounttype.push(
                this.reimarr[i].getallval.split('-')[1]
              )
              this.reimData.branchid.push(this.reimarr[i].branchid)
            }
            req2.aid = ts.d.data.operation3[0].hash.approvalid
            req2.handle =
              '0398B14C0EC6F01867D31307B7D9BCF939F07FD7772BE620141971E42273D554'
            req2.examinetime = this.grantime
            // req2.capitaltype = this.secone + "-" + this.sectwo;
            req2.bigamountsum = this.convertCurrency(this.summoney)
            req2.amountsum = this.formatPrice(this.summoney)
            req2.paytype = this.paytype.showid
            req2.fileurl = this.posturl(this.filearr1)
            req2.filename = this.postname(this.filearr1)
            this.spost(this.ts, '/mainservlet', req2).then(() => {
              this.$messagebox('提示', '发起报销审批成功！')
              this.$router.push({ name: 'jbrhome', query: { name: '' } })
            })
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })
    },
    closeTouch () {
      document
        .getElementsByTagName('body')[0]
        .addEventListener('touchmove', this.handler, { passive: false }) //阻止默认事件
    },
    openTouch () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false }) //打开默认事件
    },
    closepicker (val) {
      if (val) {
        this.closeTouch()
      } else {
        this.openTouch()
      }
    },
    // 公共方法图片数组转路径数组
    posturl (arr) {
      const a = []
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url)
      }
      return a
    },
    // 公共方法图片数组转名称数组
    postname (arr) {
      const b = []
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name)
      }
      return b
    },
    getpicval (val) {
      //console.log(val, 'val')
      this.getpicval2 = val
    },
    changeid (index) {
      this.reimarr[index].childmounttype = this.getpicval2.splice('-')[0]
      this.reimarr[index].mounttype = this.getpicval2.splice('-')[1]
      //console.log(this.reimarr,'this.reimarr22222');
    },
    // 获取请款类型
    getitem () {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: '0505',
        codetype: '05'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        let a = []

        let item
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          let b = {}
          item = ts.d.data.operation1[index]
          b.showid = item.hash.code_id
          b.showname = item.hash.code_name
          a.push(b)
        }
        this.firstarr = a
        //console.log(a, 'this.firstarr')
      })
    },

    //金额保留两位小数
    formatPrice (money) {
      // 截取当前数据到小数点后两位
      let summoney = parseFloat(money).toFixed(2)
      return summoney
    },
    // 金额转大写
    convertCurrency (moneys) {
      var money = parseFloat(moneys).toFixed(2)
      // 汉字的数字
      const cnNums = new Array(
        '零',
        '壹',
        '贰',
        '叁',
        '肆',
        '伍',
        '陆',
        '柒',
        '捌',
        '玖'
      )
      // 基本单位
      const cnIntRadice = new Array('', '拾', '佰', '仟')
      // 对应整数部分扩展单位
      const cnIntUnits = new Array('', '万', '亿', '兆')
      // 对应小数部分单位
      const cnDecUnits = new Array('角', '分', '毫', '厘')
      // 整数金额时后面跟的字符
      const cnInteger = '整'
      // 整型完以后的单位
      const cnIntLast = '元'
      // 最大处理的数字
      const maxNum = 999999999999999.9999
      // 金额整数部分
      let integerNum
      // 金额小数部分
      let decimalNum
      // 输出的中文金额字符串
      let chineseStr = ''
      // 分离金额后用的数组，预定义
      let parts
      if (money == '') {
        return ''
      }
      money = parseFloat(money)
      if (money >= maxNum) {
        // 超出最大处理数字
        return ''
      }
      if (money == 0) {
        chineseStr = cnNums[0] + cnIntLast + cnInteger
        return chineseStr
      }
      // 转换为字符串
      money = money.toString()
      if (money.indexOf('.') == -1) {
        integerNum = money
        decimalNum = ''
      } else {
        parts = money.split('.')
        integerNum = parts[0]
        decimalNum = parts[1].substr(0, 2)
      }
      // 获取整型部分转换
      if (parseInt(integerNum, 10) > 0) {
        let zeroCount = 0
        const IntLen = integerNum.length
        for (var i = 0; i < IntLen; i++) {
          var n = integerNum.substr(i, 1)
          const p = IntLen - i - 1
          const q = p / 4
          const m = p % 4
          if (n == '0') {
            zeroCount++
          } else {
            if (zeroCount > 0) {
              chineseStr += cnNums[0]
            }
            // 归零
            zeroCount = 0
            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m]
          }
          if (m == 0 && zeroCount < 4) {
            chineseStr += cnIntUnits[q]
          }
        }
        chineseStr += cnIntLast
      }
      // 小数部分
      if (decimalNum != '') {
        const decLen = decimalNum.length
        for (var i = 0; i < decLen; i++) {
          var n = decimalNum.substr(i, 1)
          if (n != '0') {
            chineseStr += cnNums[Number(n)] + cnDecUnits[i]
          }
        }
      }
      if (chineseStr == '') {
        chineseStr += cnNums[0] + cnIntLast + cnInteger
      } else if (decimalNum == '') {
        chineseStr += cnInteger
      }
      return chineseStr
    },
    //获取报销种类
    getbx () {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B167942DD3F1604F9',
        supid: val,
        codetype: '05'
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => { })
    },
    getspl (val) {
      //this.shenpi = val
      this.aid = val.id
    },
    getsplbumen (val) {
      //console.log(val,'val,index');

      this.reimarr[index].branchid = val.id
    },
    addqjtime () {
      this.$router.push({
        name: 'jbrtime'
      })
    },
    addqjtime2 () {
      const a = {
        mounttype: '',
        childmounttype: '',
        branchid: '',
        amount: ''
      }
      this.reimarr.push(a)
    },
    //获取牌照且添加牌照

    //mint时间选择器开始
    addtime () {
      this.$refs.picker.open()
    },
    getcarlist () {
      const req = {
        handle: '0E56125B90D2898A62E387C1CED62EC408B04B35BD44D675',
        query: ''
      }
      this.spost(this.ts, '/mainservlet', req).then(ts => {
        for (let index = 0; index < ts.d.data.operation1.length; index += 1) {
          const a = {}
          a.value = ts.d.data.operation1[index].hash.carid
          a.id = ts.d.data.operation1[index].hash.carid
          a.id2 = ts.d.data.operation1[index].hash.carno
          this.jbrList.push(a)
        }
        this.popupVisible22 = true
      })
    },
    deletime (index) {
      //console.log(index)
      this.reimarr.splice(index, 1)
      //console.log(this.timedata)
    },
    //时间赋值
    handleConfirm (data) {
      //console.log(data)
      this.grantime = this.formatDate(data)
    },
    //时间选择优化函数
    formatDate (date) {
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      return y + '-' + m + '-' + d
    },
    handleConfirm2 () {
      document
        .getElementsByTagName('body')[0]
        .removeEventListener('touchmove', this.handler, { passive: false })
      //this.chouseval = this.$refs.picker.getValues()[0]
      this.popupVisible22 = false
    },
    //赋值
    onDateChange (picker, values) {
      //console.log(picker)
      //console.log(values)
      this.chouseval = values
      for (let k = 0; k < this.chousname.length; k++) {
        if (this.chouseval == this.chousname[k].carno) {
          this.chouseid = this.chousname[k].carid
        }
      }
    }
  }
}
</script>
<style scoped>
.mint-cell-wrapper {
  display: flex;
  flex: 1;
  justify-content: space-around;
}
.mint-cell-value {
  display: flex;
  flex: 1;
  justify-content: space-around;
}
.timeright {
  display: inline-block;
  float: right;
}
.timeitem {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.btn_f {
  margin: 10px;
  text-align: center;
}
.qjtime {
  padding: 0 10px;
  line-height: 25px;
}
.qjcolor {
  color: #333;
  display: inline-block;
  float: right;
}
.mint-button::after {
  background-color: none !important;
}
.mint-cell-value .h3 {
  color: #000 !important;
}
.sbdata {
  margin: 10px;
  line-height: 25px;
}
.delright {
  float: right;
  color: red;
  padding-left: 5px;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: #333;
}
:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #333;
}
::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #333;
}
:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: #333;
}
.picker-center-highlight {
  position: absolute;
  top: 50% !important;
}
.picker-item {
  position: relative;
  top: 35px !important;
}
.mint-cell-title {
  width: 100px !important;
  flex: 0 !important;
}
</style>
